<!--
 * @Author: early-autumn
 * @Date: 2020-05-11 15:29:24
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-05 14:30:58
 -->
<template>
  <div>
    <el-form inline label-suffix="：">
      <el-form-item label="实收总额">
        {{ patient.overMoney | toFixed2 }}
      </el-form-item>
      <el-form-item label="欠费总额">
        <span style="color: red">
          {{ patient.arrearage | toFixed2 }}
        </span>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" border stripe :data="entries">
      <el-table-column
        prop="yiyaBillingMain.clinic"
        label="操作诊所"
        align="center"
      ></el-table-column>
      <el-table-column
        label="交易时间"
        align="center"
        prop="yiyaMainClosingEntries.createTime"
        min-width="160"
      />
      <el-table-column label="交易类型" align="center">
        <template slot-scope="scope">
          {{ billingTypeEnum[scope.row.yiyaMainClosingEntries.type] }}
        </template>
      </el-table-column>
      <el-table-column label="交易状态" align="center">
        <template slot-scope="scope">
          {{ billingStatusEnum[scope.row.yiyaMainClosingEntries.billStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        label="收费人"
        align="center"
        prop="yiyaMainClosingEntries.charge"
      />
      <el-table-column
        prop="yiyaBillingMain.tc"
        label="开单TC"
        align="center"
      ></el-table-column>

      <el-table-column
        label="应收（元）"
        min-width="100"
        align="center"
        prop="yiyaMainClosingEntries.thisPay"
      />
      <el-table-column label="实收（元）" min-width="100" align="center">
        <template slot-scope="scope">
          {{
            scope.row.yiyaMainClosingEntries.type === 3
              ? `-${scope.row.yiyaMainClosingEntries.thisPay}`
              : scope.row.yiyaMainClosingEntries.thisPay
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="优惠抵扣（元）"
        min-width="120"
        align="center"
        prop="total.deductionAmount"
      />
      <!--      1.开单：欠费变动取正值；-->
      <!--      2.还欠款：欠费变动取负值；-->
      <!--      3.退款：欠费变动取负值-->
      <el-table-column label="欠费变动（元）" min-width="120" align="center">
        <template slot-scope="scope">
          {{
            scope.row.yiyaMainClosingEntries.type === 2
              ? `-${scope.row.yiyaMainClosingEntries.arrearageChange}`
              : scope.row.yiyaMainClosingEntries.arrearageChange
          }}
        </template>
      </el-table-column>
      <el-table-column
        min-width="160"
        prop="yiyaMainClosingEntries.closingRemarks"
        label="备注"
        align="center"
      ></el-table-column>
      <empty slot="empty"></empty>
    </el-table>
  </div>
</template>

<script>
import { getEntriesPro } from '@/api/services/entries'
import { billingTypeEnum, billingStatusEnum } from '@/utils/enums'

import { billDataTransform } from '@/views/components/TabsPanes/utils'
import toFixed2 from '@/filters/toFixed2'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 10,
  billStatus: billingStatusEnum['已结账'],
}

export default {
  name: 'PaymentRecord',
  components: {
    Empty: () => import('@/components/yiya/Empty'),
  },
  filters: {
    toFixed2,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {},
      entries: [],
    }
  },
  computed: {
    billingStatusEnum() {
      return billingStatusEnum
    },
    billingTypeEnum() {
      return billingTypeEnum
    },
  },
  mounted() {
    this.queryParams = {
      ...QUERY_PARAMS,
      clinicPersonId: this.patient.id,
    }
    this.getEntriesPro()
  },
  methods: {
    async getEntriesPro() {
      try {
        this.loading = true
        const { rows, total } = await getEntriesPro(this.queryParams)
        const { dataList } = billDataTransform(rows)
        this.entries = dataList
        this.total = total
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style></style>
